<template>
  <div class="content-area">
    <!-- 筛选卡片 -->
    <div class="filter-card">
      <div class="filter-row">
        <div class="filter-item">
          <div class="filter-label">收费员姓名</div>
          <el-input
            v-model="filters.registration_name"
            placeholder="请输入收费员姓名"
            clearable
          />
        </div>
        <div class="filter-item">
          <div class="filter-label">收费员工号</div>
          <el-input
            v-model="filters.work_id"
            placeholder="请输入收费员工号"
            clearable
          />
        </div>
        <div class="filter-item">
          <div class="filter-label">所属科室</div>
          <el-select
            v-model="filters.department_id"
            placeholder="请选择科室"
            clearable
          >
            <el-option
              v-for="dept in registrationDepartmentOptions"
              :key="dept.value"
              :label="dept.label"
              :value="dept.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <div class="filter-label">职称</div>
          <el-select
            v-model="filters.professional_id"
            placeholder="请选择职称"
            clearable
          >
            <el-option
              v-for="prof in professionalOptions"
              :key="prof.value"
              :label="prof.label"
              :value="prof.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <div class="filter-label">状态</div>
          <el-select
            v-model="filters.status"
            placeholder="请选择状态"
            clearable
          >
            <el-option label="在职" :value="1" />
            <el-option label="休假" :value="2" />
            <el-option label="离职" :value="3" />
          </el-select>
        </div>
      </div>
      <div class="action-buttons">
        <el-button @click="resetFilters">重置</el-button>
        <el-button type="primary" @click="searchRegistrations">查询</el-button>
        <el-button type="success" @click="showAddRegistrationDialog">
          <el-icon><Plus /></el-icon>
          新增收费员
        </el-button>
      </div>
    </div>

    <!-- 收费员表格 -->
    <div class="registration-table">
      <div class="table-header">
        <div class="table-title">挂号收费员列表</div>
        <div class="table-tools">
          <el-button type="primary" @click="exportData">
            <el-icon><Document /></el-icon>
            导出数据
          </el-button>
          <el-button @click="refreshData">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </div>

      <el-table :data="registrations" style="width: 100%" stripe v-loading="loading">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="work_id" label="工号" width="100" />
        <el-table-column label="收费员信息" min-width="180">
          <template #default="{ row }">
            <div class="registration-info">
              <div class="registration-avatar">
                <el-avatar :size="40" :src="row.registration_avatar" />
              </div>
              <div>
                <div>{{ row.registration_name }}</div>
                <div style="font-size: 12px; color: #909399">
                  {{ formatTitle(row.professional_id) }} ·
                  {{ row.department_name }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="80">
          <template #default="{ row }">
            {{ formatSex(row.sex) }}
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="130" />
        <el-table-column prop="window_number" label="窗口编号" width="120" />
        <el-table-column prop="service_type" label="服务类型" width="150" />
        <el-table-column prop="good_at" label="擅长领域" width="180" />
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag
              :type="
                row.status === 1
                  ? 'success'
                  : row.status === 2
                  ? 'warning'
                  : 'info'
              "
              size="small"
            >
              {{ formatStatus(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons-cell">
              <el-button size="small" @click="viewRegistrationDetails(row)"
                >详情</el-button
              >
              <el-button size="small" type="primary" @click="editRegistrationHandel(row)">
                编辑
              </el-button>
              <el-button size="small" type="danger" @click="deleteRegistration(row)">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.pageTotal"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 新增/编辑收费员对话框 -->
    <el-dialog
      v-model="registrationDialog.visible"
      :title="registrationDialog.isEdit ? '编辑收费员信息' : '新增收费员'"
      width="750px"
      :destroy-on-close="false"
    >
      <el-form
        :model="registrationForm"
        label-width="100px"
        :rules="registrationRules"
        ref="registrationFormRef"
      >
        <div style="display: flex; gap: 20px">
          <div style="flex: 1">
            <!-- 收费员照片上传 -->
            <el-form-item label="收费员照片" prop="registration_avatar">
              <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :http-request="handleAvatarChange"
              >
                <el-avatar
                  :size="60"
                  :src="registrationForm.registration_avatar || defaultAvatar"
                  style="cursor: pointer"
                />
                <div style="font-size: 12px; color: #909399; margin-top: 4px">
                  点击更换
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="收费员工号" prop="work_id">
              <el-input
                v-model="registrationForm.work_id"
                placeholder="请输入收费员工号"
                :disabled="registrationDialog.isEdit"
              />
            </el-form-item>
            <el-form-item label="收费员姓名" prop="registration_name">
              <el-input
                v-model="registrationForm.registration_name"
                placeholder="请输入收费员姓名"
              />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="registrationForm.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="registrationForm.phone" placeholder="请输入联系电话" />
            </el-form-item>
            <el-form-item label="窗口编号" prop="window_number">
              <el-input 
                v-model="registrationForm.window_number" 
                placeholder="请输入服务窗口编号（如：1号窗口）" 
              />
            </el-form-item>
          </div>
          <div style="flex: 1">
            <el-form-item label="所属科室" prop="department_id">
              <el-select
                v-model="registrationForm.department_id"
                placeholder="请选择科室"
              >
                <el-option
                  v-for="dept in registrationDepartmentOptions"
                  :key="dept.value"
                  :label="dept.label"
                  :value="dept.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="职称" prop="professional_id">
              <el-select
                v-model="registrationForm.professional_id"
                placeholder="请选择职称"
              >
                <el-option
                  v-for="prof in professionalOptions"
                  :key="prof.value"
                  :label="prof.label"
                  :value="prof.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="服务类型" prop="service_type">
              <el-select
                v-model="registrationForm.service_type"
                placeholder="请选择服务类型"
              >
                <el-option label="挂号" value="registration" />
                <el-option label="收费" value="billing" />
                <el-option label="医保结算" value="insurance" />
                <el-option label="综合服务" value="comprehensive" />
              </el-select>
            </el-form-item>
            <el-form-item label="擅长领域" prop="good_at">
              <el-input
                v-model="registrationForm.good_at"
                placeholder="请输入擅长领域"
              />
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="registrationForm.status" placeholder="请选择状态">
                <el-option label="在职" :value="1" />
                <el-option label="休假" :value="2" />
                <el-option label="离职" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="账户" prop="username">
              <template v-if="registrationDialog.isEdit">
                <div style="line-height: 36px">{{ registrationForm.username }}</div>
              </template>
              <template v-else>
                <el-input
                  v-model="registrationForm.username"
                  placeholder="请输入账户"
                />
              </template>
            </el-form-item>
            <el-form-item
              label="密码"
              prop="userpass"
              v-if="!registrationDialog.isEdit"
            >
              <el-input
                v-model="registrationForm.userpass"
                placeholder="请输入密码"
                type="password"
              />
            </el-form-item>
          </div>
        </div>
        <el-form-item label="简介" prop="description">
          <el-input
            v-model="registrationForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入收费员简介"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="registrationDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="submitRegistrationForm">确认</el-button>
      </template>
    </el-dialog>

    <!-- 右侧抽屉：收费员详情 -->
    <el-drawer
      v-model="detailDrawer.visible"
      direction="rtl"
      size="600px"
      with-header
      :destroy-on-close="false"
    >
      <div class="drawer-header">
        <el-avatar :size="80" :src="detailInfo.registration_avatar || defaultAvatar" />
        <div class="drawer-title">
          <div class="name">{{ detailInfo.registration_name }}</div>
          <div class="meta">
            {{ detailInfo.work_id }} · {{ formatTitle(detailInfo.professional_id) }}
          </div>
        </div>
      </div>

      <div class="drawer-content">
        <el-descriptions column="1" border>
          <el-descriptions-item label="工号">{{ detailInfo.work_id }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{ detailInfo.registration_name }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ formatSex(detailInfo.sex) }}</el-descriptions-item>
          <el-descriptions-item label="科室">{{ detailInfo.departmentName || getDepartmentLabel(detailInfo.department_id) }}</el-descriptions-item>
          <el-descriptions-item label="职称">{{ formatTitle(detailInfo.professional_id) }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ detailInfo.phone }}</el-descriptions-item>
          <el-descriptions-item label="窗口编号">{{ detailInfo.window_number }}</el-descriptions-item>
          <el-descriptions-item label="服务类型">{{ formatServiceType(detailInfo.service_type) }}</el-descriptions-item>
          <el-descriptions-item label="擅长领域">{{ detailInfo.good_at }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="statusTagType(detailInfo.status)" size="small">{{ formatStatus(detailInfo.status) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="账户">{{ detailInfo.username }}</el-descriptions-item>
          <el-descriptions-item label="简介">{{ detailInfo.description }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <template #footer>
        <div style="display:flex; justify-content:flex-end; gap:8px; padding:10px 0;">
          <el-button @click="detailDrawer.visible = false">关闭</el-button>
          <el-button type="primary" @click="openEditFromDrawer">编辑</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "vuex";
import {
  uploadAvatar,
  addRegistration,
  editRegistration,
  getDepartmentList,
  getRegistrationProfessionalList,
  getRegistrationPagerDataBySearch,
} from "@/api/api.js";

const store = useStore();

const filters = reactive({
  registration_name: "",
  work_id: "",
  department_id: "",
  professional_id: "",
  status: "",
});

const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  pageTotal: 0,
});

// 科室选项（只显示收费处相关科室）
const registrationDepartmentOptions = ref([]);
// 职称选项
const professionalOptions = ref([]);

// 收费员数据
const registrations = ref([]);
const loading = ref(false);

// 对话框相关
const registrationDialog = reactive({
  visible: false,
  isEdit: false,
});

// 详情抽屉
const detailDrawer = reactive({
  visible: false,
});

const detailInfo = reactive({
  registration_id: null,
  work_id: "",
  registration_name: "",
  registration_avatar: "",
  professional_id: null,
  sex: null,
  phone: "",
  status: null,
  department_id: null,
  departmentName: "",
  window_number: "",
  service_type: "",
  good_at: "",
  description: "",
  username: "",
});

const defaultAvatar = "https://pic4.zhimg.com/80/v2-6c9bb6b4b7c7c41c3c7b4b4b4b4b4b4b_720w.webp";

const registrationForm = reactive({
  registration_id: null,
  work_id: "",
  registration_name: "",
  registration_avatar: "",
  professional_id: 2, // 默认中级收费员
  sex: 1,
  phone: "",
  status: 1,
  department_id: "",
  window_number: "",
  service_type: "comprehensive",
  good_at: "",
  description: "",
  username: "",
  userpass: "",
});

// 表单验证规则
const registrationRules = computed(() => {
  const rules = {
    work_id: [{ required: true, message: "请输入收费员工号", trigger: "blur" }],
    registration_name: [
      { required: true, message: "请输入收费员姓名", trigger: "blur" },
    ],
    sex: [{ required: true, message: "请选择性别", trigger: "change" }],
    phone: [
      { required: true, message: "请输入联系电话", trigger: "blur" },
      {
        pattern: /^1[3-9]\d{9}$/,
        message: "请输入正确的手机号码",
        trigger: "blur",
      },
    ],
    department_id: [{ required: true, message: "请选择科室", trigger: "change" }],
    professional_id: [{ required: true, message: "请选择职称", trigger: "change" }],
    status: [{ required: true, message: "请选择状态", trigger: "change" }],
    window_number: [{ required: true, message: "请输入窗口编号", trigger: "blur" }],
    service_type: [{ required: true, message: "请选择服务类型", trigger: "change" }],
  };
  if (!registrationDialog.isEdit) {
    rules.username = [{ required: true, message: "请输入账户", trigger: "blur" }];
    rules.userpass = [{ required: true, message: "请输入密码", trigger: "blur" }];
  }
  return rules;
});

const registrationFormRef = ref(null);

const resetFilters = () => {
  Object.keys(filters).forEach(key => {
    filters[key] = "";
  });
  loadRegistrations();
};

const searchRegistrations = () => {
  pagination.currentPage = 1;
  loadRegistrations();
};

// 加载收费处科室信息
const loadRegistrationDepartments = async () => {
  try {
    const res = await getDepartmentList();
    const payload = res && res.data ? res.data : res;
    if (payload && payload.code === 200 && Array.isArray(payload.data)) {
      // 过滤出收费处相关科室（根据实际业务逻辑调整）
      registrationDepartmentOptions.value = payload.data
        .filter(dept => 
          dept.department_name.includes('收费') || 
          dept.department_name.includes('挂号') || 
          dept.department_type === 4 // 假设4是收费处类型
        )
        .map(dept => ({
          value: Number(dept.department_id),
          label: dept.department_name,
        }));
    }
  } catch (e) {
    console.error("加载收费处科室失败", e);
    ElMessage.error("加载收费处科室失败");
  }
};

// 加载收费员职称信息
const loadProfessionalTitles = async () => {
  try {
    const res = await getRegistrationProfessionalList();
    const payload = res && res.data ? res.data : res;
    if (payload && payload.code === 200 && Array.isArray(payload.data)) {
      professionalOptions.value = payload.data.map((p) => ({
        value: Number(p.professional_id),
        label: p.professional_title,
      }));
    }
  } catch (e) {
    console.error("加载收费员职称失败", e);
    ElMessage.error("加载收费员职称失败");
  }
};

// 加载收费员列表
const loadRegistrations = async () => {
  const params = {
    registration_name: filters.registration_name,
    work_id: filters.work_id,
    department_id: filters.department_id,
    professional_id: filters.professional_id,
    status: filters.status,
    currentPage: pagination.currentPage,
    pageSize: pagination.pageSize,
  };
  loading.value = true;
  try {
    let res = await getRegistrationPagerDataBySearch(params);
    if (res && res.code == 200) {
      registrations.value = res.data.data;
      pagination.pageTotal = res.data.pageTotal;
    }
  } catch (e) {
    console.error("加载收费员列表失败", e);
    ElMessage.error("加载收费员列表失败");
  } finally {
    loading.value = false;
  }
};

const handleSizeChange = (size) => {
  pagination.pageSize = size;
  loadRegistrations();
};

const handleCurrentChange = (page) => {
  pagination.currentPage = page;
  loadRegistrations();
};

const viewRegistrationDetails = (registration) => {
  Object.assign(detailInfo, {
    registration_id: registration.registration_id ?? null,
    work_id: registration.work_id ?? "",
    registration_name: registration.registration_name ?? "",
    registration_avatar: registration.registration_avatar ?? "",
    professional_id: registration.professional_id ?? null,
    sex: registration.sex ?? 1,
    phone: registration.phone ?? "",
    status: registration.status ?? 1,
    department_id: registration.department_id ?? null,
    departmentName: registration.department_name ?? "",
    window_number: registration.window_number ?? "",
    service_type: registration.service_type ?? "",
    good_at: registration.good_at ?? "",
    description: registration.description ?? "",
    username: registration.username ?? "",
  });

  if (!detailInfo.departmentName && detailInfo.department_id) {
    detailInfo.departmentName = getDepartmentLabel(detailInfo.department_id);
  }

  detailDrawer.visible = true;
};

const openEditFromDrawer = () => {
  editRegistrationHandel({ ...detailInfo });
  detailDrawer.visible = false;
};

const editRegistrationHandel = (registration) => {
  Object.assign(registrationForm, { ...registration, userpass: "" });
  registrationDialog.isEdit = true;
  registrationDialog.visible = true;
};

const deleteRegistration = (registration) => {
  ElMessageBox.confirm(
    `确定要删除收费员 ${registration.registration_name} 吗？此操作不可恢复！`,
    "删除确认",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      // 调用删除接口
      registrations.value = registrations.value.filter(
        (r) => r.registration_id !== registration.registration_id
      );
      ElMessage.success("删除成功");
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

const beforeAvatarUpload = (file) => {
  const fileExt = file.name.substring(file.name.lastIndexOf(".")).toLowerCase();
  const isValidType = [".jpg", ".jpeg", ".png"].includes(fileExt);
  const isLt2M = file.size / 1024 / 1024 < 4;

  if (!isValidType) {
    ElMessage.error("只支持JPG、JPEG和PNG格式的图片！");
    return false;
  }
  if (!isLt2M) {
    ElMessage.error("上传图片大小不能超过2MB！");
    return false;
  }
  return true;
};

const handleAvatarChange = async (params) => {
  try {
    const formData = new FormData();
    formData.append("file", params.file);
    const res = await uploadAvatar(formData);
    if (res.code == 200) {
      registrationForm.registration_avatar = res.data;
      ElMessage.success("头像上传成功");
    } else {
      ElMessage.error("头像上传失败");
    }
  } catch (e) {
    ElMessage.error("头像上传失败");
  }
};

const showAddRegistrationDialog = () => {
  Object.assign(registrationForm, {
    registration_id: null,
    work_id: "",
    registration_name: "",
    registration_avatar: "",
    professional_id: 2,
    sex: 1,
    phone: "",
    department_id: "",
    status: 1,
    window_number: "",
    service_type: "comprehensive",
    good_at: "",
    description: "",
    username: "",
    userpass: "",
  });
  registrationDialog.isEdit = false;
  registrationDialog.visible = true;
};

const submitRegistrationForm = async () => {
  try {
    await registrationFormRef.value.validate();

    const payload = {
      registration_id: registrationForm.registration_id,
      work_id: registrationForm.work_id,
      registration_name: registrationForm.registration_name,
      registration_avatar: registrationForm.registration_avatar || defaultAvatar,
      professional_id: Number(registrationForm.professional_id),
      sex: Number(registrationForm.sex),
      phone: registrationForm.phone,
      status: Number(registrationForm.status),
      department_id: Number(registrationForm.department_id),
      window_number: registrationForm.window_number,
      service_type: registrationForm.service_type,
      good_at: registrationForm.good_at,
      description: registrationForm.description,
      username: registrationForm.username,
      ...(registrationDialog.isEdit ? {} : { userpass: registrationForm.userpass }),
    };

    let resp;
    if (registrationDialog.isEdit) {
      resp = await editRegistration(payload);
    } else {
      resp = await addRegistration(payload);
    }

    const data = resp && resp.data ? resp.data : resp;
    if (data && (data.code === 200 || data.success === true || data.status === 200)) {
      ElMessage.success(registrationDialog.isEdit ? "收费员信息更新成功" : "收费员添加成功");
      registrationDialog.visible = false;
      await loadRegistrationDepartments();
      loadRegistrations();
    } else {
      const msg = (data && (data.message || data.msg)) || "操作失败";
      ElMessage.error(msg);
    }
  } catch (error) {
    console.error("表单验证失败:", error);
  }
};

const exportData = () => {
  ElMessage.success("数据导出成功");
};

const refreshData = () => {
  loadRegistrations();
  ElMessage.success("数据已刷新");
};

const formatTitle = (professional_id) => {
  const opt = professionalOptions.value.find(
    (p) => Number(p.value) === Number(professional_id)
  );
  if (opt) return opt.label;
  const titles = {
    1: "高级收费员",
    2: "中级收费员", 
    3: "初级收费员",
    4: "实习收费员",
  };
  return titles[professional_id] || professional_id;
};

const formatStatus = (status) => {
  const statusMap = {
    1: "在职",
    2: "休假", 
    3: "离职",
  };
  return statusMap[status] || status;
};

const formatSex = (sex) => {
  return sex === 1 ? "男" : sex === 2 ? "女" : "";
};

const formatServiceType = (service_type) => {
  const typeMap = {
    registration: "挂号",
    billing: "收费",
    insurance: "医保结算",
    comprehensive: "综合服务",
  };
  return typeMap[service_type] || service_type;
};

const getDepartmentLabel = (id) => {
  const d = registrationDepartmentOptions.value.find((x) => Number(x.value) === Number(id));
  return d ? d.label : id;
};

const statusTagType = (status) =>
  status === 1 ? "success" : status === 2 ? "warning" : "info";

onMounted(async () => {
  await loadRegistrationDepartments();
  await loadProfessionalTitles();
  loadRegistrations();
});
</script>

<style lang="scss" scoped>
.content-area {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background-color: #f5f7fa;
}

.filter-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.filter-item {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  flex: 1;
}

.filter-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.action-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
}

.registration-table {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-title {
  font-size: 18px;
  font-weight: 600;
}

.table-tools {
  display: flex;
  gap: 12px;
}

.registration-info {
  display: flex;
  align-items: center;
}

.registration-avatar {
  margin-right: 12px;
}

.action-buttons-cell {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.avatar-uploader {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .el-avatar {
    border: 1px solid #ebeef5;
    background: #f5f7fa;
  }
}

.drawer-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #f0f0f0;
}
.drawer-title .name {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}
.drawer-title .meta {
  font-size: 13px;
  color: #909399;
  margin-top: 6px;
}
.drawer-content {
  padding: 16px 0;
  max-height: calc(100vh - 200px);
  overflow: auto;
}
</style>